@extends('layouts.home')
@section('content')
<div class="blog-body">
    <link href="/css/timeline.css" rel="stylesheet" />
    <script src="/js/modernizr.js"></script>
    <div class="layui-container">
        <blockquote class="layui-elem-quote sitemap shadow">
            <i class="layui-icon">&#xe715;</i>
            <span class="layui-breadcrumb" lay-separator=">">
            <a href="/">首页</a>
            <a><cite>轻言细语</cite></a>
        </span>
        </blockquote>
        <div class="blog-nav-two shadow">
            <div class="layui-breadcrumb" lay-separator="|">
                <a href="/timeline" class="selected"><span>轻言细语</span></a>
            </div>
        </div>
        <div class="blog-panel">
            <section id="cd-timeline" class="cd-container">
                @foreach($time_line as $item=>$value)
                <div class="cd-timeline-block">
                    @if($item % 3 == 0)
                    <div class="cd-timeline-img cd-picture">
                        <img src="/images/cd-icon-picture.svg" alt="Location">
                    </div>
                    @elseif($item % 3 == 1)
                        <div class="cd-timeline-img cd-movie">
                            <img src="/images/cd-icon-movie.svg" alt="Location">
                        </div>
                    @elseif($item % 3 == 2)
                        <div class="cd-timeline-img cd-location">
                            <img src="/images/cd-icon-location.svg" alt="Location">
                        </div>
                    @endif
                    <div class="cd-timeline-content">
                        <h2>{{$value->name ?? ''}}</h2>
                        <p>{{$value->content ?? ''}}</p>
                        <span class="cd-date">{{date("Y-m-d",strtotime($value->created_at))}}</span>
                    </div>
                </div>
                @endforeach

            </section>
        </div>
    </div>


    <script src="/lib/layui/layui.js?v=Q4hfA5tL6flbhH6c-jlA6yVJRpZRgzEJ43xJxeRS3Ps"></script>

    <script>
        layui.use('jquery', function () {
            var $ = layui.jquery;

            $(function () {
                var $timeline_block = $('.cd-timeline-block');
                $timeline_block.each(function () {
                    if ($(this).offset().top > $(window).scrollTop() + $(window).height() * 0.75) {
                        $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
                    }
                });
                $(window).on('scroll', function () {
                    $timeline_block.each(function () {
                        if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
                            $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
                        }
                    });
                });
            });
        });
    </script>
</div>
@endsection
